<script setup>
import { ref,reactive,toRefs,markRaw,provide,computed } from 'vue'
import { useItem } from '../../../store/index.js' //从pinia导入数据
import { storeToRefs } from 'pinia'
import HostPath from './volume/HostPath.vue'
import Secret from './volume/Secret.vue'
import ConfigMap from './volume/ConfigMap.vue'
import NFS from './volume/NFS.vue'
import EmptyDir from './volume/EmptyDir.vue'
import PVC from './volume/PVC.vue'
import DownWardAPI from './volume/DownWardAPI.vue'


const { item } = storeToRefs(useItem())
const data = reactive({
    volumeTypeList: ['hostPath','secret','configMap','nfs','emptyDir','persistentVolumeClaim','downwardAPI'],
    volumeTypeComp: { // 动态组件
        'hostPath': markRaw(HostPath),
        'secret': markRaw(Secret),
        'configMap': markRaw(ConfigMap),
        'nfs': markRaw(NFS),
        'emptyDir': markRaw(EmptyDir),
        'persistentVolumeClaim': markRaw(PVC),
        'downwardAPI': markRaw(DownWardAPI),
    }
})
let volumeType = ref('hostPath')
let showAddVolume = ref(false)
const addVolume = () => {
    console.log("添加volume")
    showAddVolume.value = true
}


const useItemer = useItem()
const deleteTableRow = (index) => {
    useItemer.item.spec.template.spec.volumes.splice(index, 1)
}
const closeAddVolumeDialog = () => {
    showAddVolume.value = false
}
// 发布和订阅的方式把closeAddVolumeDialog发布出去
provide('closeAddVolumeDialog',closeAddVolumeDialog)

// 获取volume类型
const getVolumeType = computed(()=> (volumeItem)=>{
  const keyList = Object.keys(volumeItem)
  // [name, secret/nfs/]  [aws, name]
  keyList.splice(keyList.indexOf('name'), 1)
  return keyList[0]
})

const {volumeTypeList,volumeTypeComp} = toRefs(data)

</script>

<template>
    <el-table
    border
    :data="item.spec.template.spec.volumes"
    style="width: 100%"
    height="400px"
    >
        <el-table-column align="center" prop="" label="名称" width="240">
            <template #default="scope">
                <el-input v-model="scope.row.name" placeholder="请输入存储卷的名称" />
            </template>
        </el-table-column>

        <el-table-column align="center" label="类型" width="240">
            <template #default="scope">
                <span>{{ getVolumeType(scope.row) }}</span>
            </template>
        </el-table-column>

        <el-table-column align="center" label="volume配置">
            <template #default="scope">
                <component
                v-if="volumeTypeList.includes(getVolumeType(scope.row))"
                :is="volumeTypeComp[getVolumeType(scope.row)]"
                :key="scope.row.name"
                method="Update"
                :volumeConfig="scope.row"
                ></component>
                <span v-else>暂不支持对该类型的volume进行修改</span>
            </template>
        </el-table-column>

        <el-table-column align="center" fixed="right" width="140px">
            <template #header>
                <el-button link type="primary" @click="addVolume()">添加</el-button>
            </template>
            <template #default="scope">
                <el-button link type="warning" @click="deleteTableRow(scope.$index)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 添加volume弹窗 -->
    <el-dialog v-model="showAddVolume" title="添加volume" center destory-on-close width="60%">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <el-select v-model="volumeType" placeholder="请选择volume类型" style="width: 200px;">
                        <el-option
                        v-for="t in volumeTypeList"
                        :key="t"
                        :label="t"
                        :value="t">
                        </el-option>
                    </el-select>
                </div>
            </template>
            <component :is="volumeTypeComp[volumeType]"></component>
        </el-card>
    </el-dialog>
</template>

<style scoped>
</style>